import React from 'react';






class TableList extends React.Component{
    constructor(){
        super();
        this.state={
            isFirstLoading:true
        }
    }

    componentWillReceiveProps(){
        this.setState({
            isFirstLoading:false
        })

    }

    render(){
        //表头
        let tableHeader=this.props.tableHeads.map(
            (tableHeads,index)=> {
                if (typeof tableHeads ==='object'){
                    return <th key={index} width={tableHeads.width}>{tableHeads.name}</th>
                } else if(typeof tableHeads ==='string'){
                    return <th key={index}>{tableHeads}</th>
                }
            }
        )
        //列表内容
        let listBody=this.props.children
        //列表信息
        let listInfo=(
            <tr>
                <td colSpan={this.props.tableHeads.length} className="text-center">
                    {/*是否是第一次加载*/}
                    {this.state.isFirstLoading ? "正在加载数据..." : "没有找到相应的结果~"}
                </td>
            </tr>
        )

        let tableBody=listBody.length > 0 ? listBody:listInfo
        return(
            <div className="row">
                <div className="col-md-12">
                    <table className="table table-striped table-bordered ">
                        <thead>
                            <tr>
                                {tableHeader}
                            </tr>
                        </thead>
                        <tbody>
                           {tableBody}
                        </tbody>
                    </table>
                </div>
            </div>


        )
    }
}


export default TableList;